<template>
    <div>
        <h4>学生信息一览</h4>
        <table border="1" cellspacing="0" width="600">
            <thead>
                <tr><th>学号</th><th>姓名</th><th>性别</th><th>成绩</th><th>操作</th></tr>
            </thead>
            <tbody>
                <tr v-for="(s,index) in stuArray.list" :key="s.id">
                    <td>{{s.id}}</td>
                    <td>{{s.name}}</td>
                    <td>{{s.sex}}</td>
                    <td>{{s.grade}}</td>
                    <td>
                        <a href="javascript:void(0)" @click="del(index)">删除</a>
                        <a href="javascript:void(0)" @click="find(s)">修改</a>
                    </td>
                </tr>
            </tbody>
        </table>
        <a v-for="i in stuArray.pages" style="margin-left:10px" 
        href="javascript:void(0)" @click="pageClick(i)" :key="i">{{i}}</a><br>
        <select v-model="sortWey">
            <option value="id">编号</option>
            <option value="grade">成绩</option>
        </select>
        <input type="button" value="排序" @click="sort">
    </div>
</template>

<script>
export default {
    props:["stuArray"],
    data(){
        return{
            sortWey:"id"
        }
    },
    methods:{
        pageClick(i){
            this.$emit("speak",i)   
        },  
        del(id){
            this.stuArray.list.splice(id,1)
        },
        find(s){
            this.$emit("set",s);
        },
        sort(){
            var sortMethod = (sortName)=>(a,b)=>a[sortName] - b[sortName];
            this.stuArray.list.sort(sortMethod(this.sortWey));
        }
    }
}
</script>

<style>

</style>